<template>
  <div class="leftBox df fdc">
    <div class="firstAid">
      <FirstHeader :title="'急救信息'" :file="'home'" :icon="'icon1'"></FirstHeader>
      <div class="statistics flex-x-between flex-wrap">
        <div class="item flex-x-start" v-for="(item, index) in firstAidInformationData" :key="index">
          <el-image class="icon" :src="item.icon" fit="contain" />
          <div>
            <div class="value">
              {{ item.value }} <span class="unit">{{ item.unit }}</span>
            </div>
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="alarm">
        <SecondHeader :title="'告警信息'"></SecondHeader>
        <div class="list">
          <div class="th flex-x-start">
            <div class="time">告警时间</div>
            <div class="name f1">告警内容</div>
            <div class="level">告警级别</div>
            <div class="states">状态</div>
          </div>
          <div class="item flex-x-start" v-for="(item, index) in warnDataList" :key="index">
            <div class="time">{{ item.createTime }}</div>
            <div class="content f1 t-omit">{{ item.content }}</div>
            <div class="level">{{ item.level }}</div>
            <div class="states">{{ item.status }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="secondAid f1 mt-20">
      <FirstHeader :title="'呼叫类型前五'" :file="'home'" :icon="'icon-s-1'"></FirstHeader>
      <div class="echarts">
        <ECharts :option="option" :resize="false" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="home">
import { onMounted, ref } from "vue";
import ECharts from "@/components/ECharts/index.vue";
import FirstHeader from "@/components/FirstHeader/index.vue";
import SecondHeader from "@/components/SecondHeader/index.vue";
import { ECOption } from "@/components/ECharts/config";
import { callTypeTop5, commonAlarm, firstAidInformation } from "@/api/modules/home";
import { ZRColor } from "echarts/types/dist/shared";

interface statistics {
  icon: string;
  name: string;
  value: string;
  unit: string;
}
let firstAidInformationData = ref<statistics[]>([
  {
    name: "受理量",
    icon: new URL(`@/assets/images/home/icon7.png`, import.meta.url).href,
    value: "5",
    unit: "个"
  },
  {
    name: "派单量",
    icon: new URL(`@/assets/images/home/icon2.png`, import.meta.url).href,
    value: "20",
    unit: "个"
  },
  {
    name: "派出车辆数",
    icon: new URL(`@/assets/images/home/icon3.png`, import.meta.url).href,
    value: "20",
    unit: "辆"
  },
  {
    name: "派出人员数",
    icon: new URL(`@/assets/images/home/icon4.png`, import.meta.url).href,
    value: "30",
    unit: "人"
  },
  {
    name: "总车辆数",
    icon: new URL(`@/assets/images/home/icon5.png`, import.meta.url).href,
    value: "52",
    unit: "辆"
  },
  {
    name: "救治人数",
    icon: new URL(`@/assets/images/home/icon6.png`, import.meta.url).href,
    value: "20",
    unit: "人"
  }
]);
onMounted(async () => {
  getFirstAidInformation();
  getCommonAlarm();
  getCallTypeTop5();
});
const getFirstAidInformation = async () => {
  let {
    data: { list }
  } = await firstAidInformation();
  firstAidInformationData.value.forEach((i, index) => {
    i.value = list[index];
  });
};
let warnDataList = ref<any[]>();
const getCommonAlarm = async () => {
  let {
    data: { list }
  } = await commonAlarm({ pageNum: 1, pageSize: 10 });
  warnDataList.value = list;
};
let colorList: ZRColor[] = [
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      { offset: 0, color: "#dc2536" },
      { offset: 1, color: "#dc8f25" }
    ]
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      { offset: 0, color: "#ff6c01" },
      { offset: 1, color: "#fad4a3" }
    ]
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      { offset: 0, color: "#fccc34" },
      { offset: 1, color: "#3bcc94" }
    ]
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      { offset: 0, color: "#3384ec" },
      { offset: 1, color: "#aefbda" }
    ]
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      { offset: 0, color: "#39ce9b" },
      { offset: 1, color: "#abfcd6" }
    ]
  }
];
const getCallTypeTop5 = async () => {
  let {
    data: { countList, nameList }
    // data
  } = await callTypeTop5();
  // let countList = [50, 60, 70, 20, 30];
  // let nameList = ["创伤类", "内科症状", "腹痛", "车祸", "摔伤"];
  option.value.yAxis = [
    {
      type: "category",
      inverse: true,
      axisLabel: {
        show: true,
        color: "#fff",
        fontSize: "18",
        fontWeight: "bold"
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      data: nameList
    },
    {
      type: "category",
      inverse: true,
      axisTick: "none",
      axisLine: {
        show: false
      },
      show: true,
      axisLabel: {
        color: "#fff",
        fontSize: "18",
        fontWeight: "bold",
        formatter: function (value) {
          return value;
        }
      },
      data: countList
    }
  ];
  option.value.series = [
    {
      name: "安全指数",
      type: "bar",
      zlevel: 1,
      itemStyle: {
        borderRadius: 30,
        color: params => {
          return colorList[params.dataIndex];
        }
      },
      barWidth: 16,
      data: countList
    },
    {
      name: "背景",
      type: "bar",
      barWidth: 16,
      barGap: "-100%",
      data: defaultData,
      itemStyle: {
        // innerWidth: 16,
        borderRadius: 30,
        color: "#0b2547"
      }
    }
  ];
};

let defaultData = [100, 100, 100, 100, 100, 100];

const option = ref<ECOption>({
  grid: {
    left: "5%",
    right: "5%",
    bottom: "5%",
    top: "10%",
    containLabel: true
  },
  // tooltip: {
  //     trigger: 'axis',
  //     axisPointer: {
  //         type: 'none'
  //     },
  //     formatter: function(params) {
  //         return params[0].name + '<br/>' +
  //             params[0].seriesName + ' : ' + params[0].value + "%"
  //     }
  // },
  legend: {
    show: true,
    icon: "circle",
    top: 20,
    data: ["00"]
  },
  xAxis: {
    show: false,
    type: "value"
  }
});
</script>

<style scoped lang="scss">
.firstAid {
  height: 526px;
  background-image: url("../../../../assets/images/home/firstAidBg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid #119edb;

  .alarm {
    .list {
      margin: 0 25px;
      margin-top: 15px;
      background: linear-gradient(0deg, #1545923f 0%, rgba(25, 82, 175, 0) 100%);

      .time {
        width: 130px;
      }

      .level {
        width: 80px;
      }

      .states {
        width: 60px;
      }

      .th {
        font-size: 16px;
        color: #28fbff;
        text-shadow: 0px 0px 6px #00fbff;
        line-height: 30px;
        background-color: rgba(57, 117, 174, 0.3);
        text-align: center;
      }

      .item {
        color: #ffffff;
        font-size: 14px;
        text-align: center;

        .content {
          text-align: center;
        }
      }
    }
  }

  .statistics {
    padding: 0 15px;

    .item {
      width: calc(100% / 3);
      margin: 15px 0;
      .value {
        color: #ffffff;
        font-size: 18px;

        .unit {
          color: #51b9ff;
          font-size: 12px;
        }
      }

      .name {
        color: #c3e1ff;
        font-size: 14px;
      }
    }
  }
}

.secondAid {
  // height: 406px;
  width: 100%;
  background: url("@/assets/images/home/secondAidBg.png") no-repeat;
  background-size: 100% 100%;
  border: 1px solid #119edb;
}

.leftBox {
  width: 520px;
  // height: 100%;
}

.echarts {
  width: 100%;
  height: 90%;
}
</style>
